import React from 'react';
import ReactDOM from 'react-dom';
import { HotTable } from '@handsontable/react';
import Handsontable from 'handsontable';
export default class App extends React.Component {
  constructor(props) {
    super(props);
    window.$appRoot = this
    this.handsontableData = Handsontable.helper.createSpreadsheetData(10, 2000);
    this.hot = React.createRef()
    this.hotSettings = {
      data: this.handsontableData,
      rowHeaders: true,
      // startRows:5,
      colHeaders: true,
      // colWidths: 80,
      // fixedRowsTop: 4,
      // fixedColumnsLeft: 4,
      afterRenderer: this.afterRenderer,
      selectionMode: 'multiple',
      // dropdownMenu: true,
      // filters:true,
      viewportColumnRenderingOffset: 70,
      // hiddenColumns:{
      //   copyPasteEnabled: true,
      //   indicators: true,
      //   columns: [1, 2, 5]
      // },   
      // dropdownMenu: ['remove_col', '---------', 'make_read_only', 'alignment'],    
      hiddenRows: {
        rows: [9 ],
        indicators: true,
        // exclude hidden rows from copying and pasting
        copyPasteEnabled: false
      },
      nestedHeaders:true,
      // enable column collapsing for all headers
      collapsibleColumns: true,

      // enable column collapsing for selected headers
      collapsibleColumns: [
        {row: -4, col: 1, collapsible: true},
        {row: -3, col: 5, collapsible: true}
      ],      
      mergeCells: [
        {
          "colspan": 1,
          "col": 1,
          "rowspan": 5,
          "row": 1
        },
        {
          "colspan": 1,
          "col": 1,
          "rowspan": 4,
          "row": 6
        }
      ],
      // colWidths:[900,1,328,81,81,81,81,81,99,81,81,81,81,81,81,81,81,90,72,72,72,72,72,72,72,72,72,72,72,72,72],
      // rowHeights:[20,20,40,50,60,40],
      cells(row, col, prop) {
        // console.warn(row, col, prop)
        // this.type = 'numeric';
        // this.numericFormat = {
        //     pattern:{mantissa:2},
        //     pattern: '0,0.00'
        // };        
        // this.type = 'date';
        // this.dateFormat = 'YYYY/MM/DD';
        // this.correctFormat = true;           
      },
      beforeChange: function(changes) {
        console.warn(JSON.parse(JSON.stringify(changes)))
        changes.forEach(function(item) {
          if (typeof item[2] === 'string') {
            const num = +item[2].replace(/,/g, '');
            if (!isNaN(num)) {
              item[2] = num.toLocaleString('en-US');
            }
          }
        });
        console.warn(changes)
      }    
    };
  }
  afterRenderer = (TD, row, col, prop, value, cellProperties) => {

    // console.log('AA')

    // let icon = document.createElement('span')
    // icon.innerText = '图标'
    // icon.classList.add('canzhao-icon')
    // TD.appendChild(icon);
    // console.warn(value)
    // return value
  }

  componentDidMount() {
  }
  render() {

    return (
        <HotTable
          id="hot"
          ref={this.hot}
          settings={this.hotSettings}
        />
/*       <div style={{ width: '1900px', height: '1400px', overflow: 'auto' }}>
      </div> */
    );
  }
}

